<script setup lang="ts">
import type { DataExtact } from '@/api/model'
import { useDesignStore, useInstStore } from '@/stores'
import { closeCurrentWindow } from '@/utils/helper'
import request, { STORAGE_TOKEN_KEY } from '@/utils/request'
import { Button, message, Popconfirm, Tooltip } from 'ant-design-vue'
import { computed } from 'vue'

defineOptions({
  name: 'NavBar',
  inheritAttrs: true,
})
const instStore = useInstStore()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)

async function handleSave(preview: boolean) {
  const previewUrl = await instStore.saveInstDesignData()
  message.success('保存成功')
  if (import.meta.env.PROD) {
    if (preview) {
      // window.location.replace(previewUrl!)
      window.location.href = previewUrl!
    }
    else {
      closeCurrentWindow()
    }
  }
}

// 获取登录接口地址
const loginUrl = import.meta.env.VITE_APP_LOGIN_URL

async function login() {
  if (loginUrl) {
    request.get<unknown, DataExtact<any>>(`${loginUrl}/api/home/cms`, { withCredentials: true })
      .then((res) => {
        if (res.token) {
          localStorage.setItem(STORAGE_TOKEN_KEY, res.token)
          message.success('登录成功')
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        }
        else {
          message.error('请通过内容中台登录')
        }   
      })
      .catch(() => {
        message.error('请通过内容中台登录')
      })
  }
}
</script>

<template>
  <div class="flex flex-row items-stretch fixed left-0 right-0 top-0 pl-3 pr-5 bg-white h-navbar nav-bar z-[var(--app-nav-bar-zindex)]">
    <div class="flex-none flex items-center h-full gap-1 text-main-app cursor-pointer text-sm" @click="closeCurrentWindow">
      <i class="i-ant-design:left-outlined w-4 h-4" />
      <span class="leading-none">退出编辑</span>
    </div>
    <div class="flex flex-row items-center gap-6 text-lg flex-1 justify-center">
      <div class="h-full flex flex-row items-center cursor-pointer text-second-app hover:text-primary-app" :class="platform === 'mobile' ? 'border-b-solid border-b-2px border-primary-app text-primary-app' : ''" @click="designStore.setPlatform('mobile')">
        <div class="flex flex-row items-center gap-6px text-base">
          <i class="i-ant-design:mobile-twotone" />
          <span>手机</span>
        </div>
      </div>
      <div class="h-full flex flex-row items-center cursor-pointer text-second-app hover:text-primary-app" :class="platform === 'pc' ? 'border-b-solid border-b-2px border-primary-app text-primary-app' : ''" @click="designStore.setPlatform('pc')">
        <div class="flex flex-row items-center gap-6px text-base">
          <i class="i-ant-design:desktop-outlined" />
          <span>电脑</span>
        </div>
      </div>
    </div>
    <div class="w-10 justify-center flex items-center cursor-pointer mx-5">
      <Tooltip title="预览">
        <i class="i-ant-design:eye-filled block w-8 h-8 text-main-app hover:text-primary-app" @click="designStore.togglePreview(true)" />
      </Tooltip>
    </div>
    <div class="flex-none flex flex-row gap-2 items-center">
      <Button v-if="loginUrl" type="dashed" @click="login">
        开发登录
      </Button>
      <Popconfirm title="确定要清空所有组件吗？" ok-text="确定" cancel-text="取消" @confirm="designStore.clear">
        <Button danger>
          清空
        </Button>
      </Popconfirm>
      <Button @click="handleSave(true)">
        保存并预览
      </Button>
      <Button type="primary" @click="handleSave(false)">
        保存
      </Button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav-bar {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.039);
}
</style>
